<template>
      <div>
         <div class="videoArea">
              <video ref="videoPlayer" class="video-js"></video>
        </div>

      </div>
</template>
<script>


import videojs from 'video.js' 
import 'videojs-contrib-hls'
import "@videojs/http-streaming"

export default {
  
  data() {
    return {
        player:"",
           
    };
  },
  watch:{
  
  },
  computed:{
  

  },
  created(){
       
  },
  mounted(){
    this.createVideo()
  },


  methods: {
 
      createVideo(){
		     
               console.log('createVideocreateVideo')
            	let options = {
	              autoplay: false,
	              controls: true,
	              sources: [
	                  {
	                      src: "http://134.84.57.219:7086/live/cameraid/1000067%24157/substream/1.m3u8",
	                  }
	              ]
	           }
           
            this.player = videojs(this.$refs.videoPlayer, options, function onPlayerReady() {
                console.log('onPlayerReady', this);
                this.on('timeupdate', function () {
                    // 计算表最新推流的时间和现在播放器播放推流的时间
                    let differTime = this.buffered().end(0) - this.currentTime();
                    // 差值大于6s时进行重新加载直播流
                    if (differTime >= 6){
                        console.log("重新加载视频流");
                        this.$refs.videoPlayer(this.player.currentSrc())
                        this.load()
                        this.play()
                    }
                })

                let seekingTimes = 0
                this.on("seeking",function(){
                    seekingTimes ++
                    console.log("直播卡顿加载loading");
                    if(seekingTimes >= 3) {
                        seekingTimes = 0
                        this.$refs.videoPlayer(this.player.currentSrc())
                        this.load()
                        this.play()
                    }
                })
                //监听video播放器拿到视频流重新播放时出发seeked
                  this.on('seeked',function(){
                      seekingTimes = 0
                      // 已经拿到视频流,可以播放
                      console.log('seeked')
                  })



            })




        }

    
        
  
  },
  updated(){
    console.log('updatedupdated')
  },

   beforeDestroy() {
    if (this.player != null) {
       this.player.dispose() // dispose()会直接删除Dom元素
    }
 }
};
</script>


